<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 依赖包 -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="app">
        <div>
            <span>请你输入搜索的内容</span>
            <input type="text" v-model="keyword">
        </div>
        <!-- 无序列表：展示数据的地方 -->
        <ul>
            <li v-for="(person,index) in result" :key="person.id">
                {{person.name}}---{{person.age}}
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    //创建VM实例
    let VM = new Vue({
        el: '#app',
        data: {
            //数据
            list: [
                { id: 1, name: "李俊哲", age: 18 },
                { id: 2, name: "贾成豪", age: 19 },
                { id: 3, name: "晶哥", age: 20 },
                { id: 4, name: "强哥", age: 118 },
                { id: 5, name: "鲁班", age: 128 },
                { id: 6, name: "貂蝉", age: 8 },
                { id: 7, name: "张飞", age: 38 },
                { id: 8, name: "吕布", age: 1128 },
                { id: 9, name: "孙八悟空", age: 6 },
                { id: 10, name: "八戒", age: 9 },
            ],
            //文本框的关键字
            keyword: '',
        },
        //计算属性:利用已有的属性值，计算出一个新的属性
        computed: {
            result() {
                 //返回新的属性的属性值
                 //筛选出复合条件的元素作为新的属性的属性值进行展示
                 //当关键字发生变化的时候，重新计算，计算出最新的复合条件元素进行展示
                return this.list.filter(item=>item.name.indexOf(this.keyword)!=-1);
            }
        }
    });
    //Vue构造函数中配置项，千万单词别错，语法格式别错
</script>